<template>
  <!-- 项目实施 - 7成本控制 - tab2完结项目 -->
  <div class="cost-control-end">
    <el-form class="search" :inline="true" :model="formData" label-position="right" label-width="90px">
      <el-row :gutter="12">
        <el-col :span="16" v-if="showSearch == false">
          <advancedFilter></advancedFilter>
        </el-col>
        <el-col :span="6" v-if="showSearch">
          <el-form-item label="项目名称">
            <el-input v-model="formData.ipt1" clearable placeholder="搜索关键字" style="width: 100%;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="showSearch">
          <el-form-item label="费用类型">
            <el-input v-model="formData.ipt2" clearable placeholder="搜索关键字" style="width: 100%;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="showSearch ? 12 : 8" style="text-align: right;">
          <el-button type="primary">筛选</el-button>
          <el-button @click="resetForm">重置</el-button>
          <el-button type="text" @click="changeSearch"> {{showSearch===true ? '高级筛选' : '普通筛选'}} </el-button>
        </el-col>
      </el-row>
    </el-form>
    <cust-act-table
      ref="custActTable"
      tableType="costControlEnd"
      :list="tableData"
      :colConfigs="customColumns"
      @changePage="changePage"
      @getDetail="getDetail"
      @getSelectedRow="getSelectedRow"
      :pageNum="page.pageNum"
      :pageSize="page.pageSize"
      :total="page.total"
      showIdx
      :showAct="true"
      rKey="index"
    ></cust-act-table>
    <!-- 点击列表弹窗 -->
    <el-dialog class="table-modal" :title="modalType == 'edit' ? '修改' : '查看'" :visible.sync="tableModalState" @close="closeModal(modalType)" width="940px" :close-on-click-modal="false">
      <modalBtns :modalType="modalType == 'card3' ? 'table' : modalType" @close="closeModal('table')"></modalBtns>
      <formName text="项目成本"></formName>
      <div class="form-content">
        <formPart listTitle="基本信息" @clickModalBtn="showNextLevelModal" ref="info1" :modalTitle="modalType == 'table' ? 'modalDetail' : 'EDIT-FORM'" :formList="formInfo.info1"></formPart>
        <formPart listTitle="支出明细" @clickModalBtn="showNextLevelModal" ref="info2" modalTitle="EDIT-TABLE" :formList="formInfo.info2"></formPart>
      </div>
    </el-dialog>
    <!-- 二级弹窗 -->
    <el-dialog title="穿透显示详情" class="card-modal" :visible.sync="nextLevelState" @close="closeModal('card2')" width="1200px" :close-on-click-modal="false">
      <cust-act-table
        ref="custCardDetailTable"
        tableType=""
        :list="cardData2"
        :colConfigs="cardCol2"
        @changePage="changeDetailPage"
        @getSelectedRow="showModal('card3')"
        :pageNum="tableDetailPage.pageNum"
        :pageSize="tableDetailPage.pageSize"
        :total="tableDetailPage.total"
        :showIdx="false"
        :showAct="false"
        rKey="index"
      ></cust-act-table>
    </el-dialog>
    <!-- 费用支出 -->
    <el-dialog title="费用支出" class="btn-modal" :visible.sync="fyzcModal" @close="closeModal('fyzcModal')" width="1200px" style="margin-top:6vh;" :close-on-click-modal="false">
      <detailModal :tabList="fyzcDetailModalInfo.tabList" :modalImgs="fyzcDetailModalInfo.imgs" :formDetailTitle="fyzcDetailModalInfo.formDetailTitle" :formDetail="fyzcDetailModalInfo.formList" :formData="fyzcDetailModalInfo.doc" :rTabData="fyzcDetailModalInfo.rTabData" menuType="费用支出"></detailModal>
    </el-dialog>
  </div>
</template>

<script>
import { tableData72, customColumns72, customColumns7_2, menu7_custCardDetailTableData, menu7_custCardDetailTableCol } from '../../js/staticData';
import advancedFilter from '../../components/advancedFilter';
import custActTable from "../../components/custActTable.vue";
import detailModal from '../../components/detailModal';
import modalBtns from '../../components/modalBtns';
import formName from '../../components/formName';
import formPart from '../../components/formPart';
export default {
  name: "costControlEnd",
  components: {custActTable, advancedFilter, detailModal, modalBtns, formName, formPart},
  data() {
    return {
      formData: {
        ipt1: '',
        ipt2: ''
      },
      showSearch: true,
      edit: false,
      fyzcModal: false,
      tableModalState: false,
      nextLevelState: false,
      modalType: '',
      customColumns: customColumns72,
      customCol2: customColumns7_2,
      cardData2: menu7_custCardDetailTableData,
      cardCol2: menu7_custCardDetailTableCol,
      tableData: tableData72,
      page: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      tableDetailPage: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      fyzcDetailModalInfo: {
        formDetailTitle: '费用支出',
        formList: [
          {
            title: '',
            modalTitle: 'EDIT-FORM',
            list: [
              { l: '经办人', v: '朱冠', span: 6 },
              { l: '经办日期', v: '2024-07-30', type: 'datePicker', span: 6 },
              { l: '经办部门', v: 'XX部门', span: 6 },
              { l: '№', v: '', span: 6 },
              { l: '经办单位', v: 'XX发展集团有限公司', span: 24 }
            ]
          },
          {
            title: '基本信息',
            modalTitle: 'EDIT-FORM',
            list: [
              { l: '项目名称', v: '蓝旗机器人绿化改造费用支出', type: 'inputIconR', icon: { path:require('../../images/modal-icon1.png'), width: '14px', height: '16px'}, span: 12 },
              { l: '项目编号', v: 'XMBH202208028', span: 6 },
              { l: '项目部门', v: 'XMBM部门', span: 6 },
              { l: '费用类型', v: '住宿费', type: 'inputIconR', icon: { path:require('../../images/modal-icon1.png'), width: '14px', height: '16px'}, span: 6 },
              { l: '预算余额', v: '2,000.00', type: 'unitInput', unit: '元', span: 6 },
              { l: '支出金额', v: '', type: 'unitInput', unit: '元', span: 6 },
              { l: '支出日期', v: '', type: 'datePicker', span: 6 },
              { l: '支出事由', v: '', span: 24 }
            ]
          }
        ],
        tabList: [
          {
            label: "智能校验",
            value: "1",
            img: require('../../images/icon-tab-rt-2.png'),
            active: require('../../images/icon-tab-rt-active-2.png')
          }, {
            label: "流程预测",
            value: "4",
            img: require('../../images/icon-tab-rt-4.png'),
            active: require('../../images/icon-tab-rt-active-4.png')
          }, {
            label: "相关数据",
            value: "5",
            img: require('../../images/icon-tab-rt-5.png'),
            active: require('../../images/icon-tab-rt-active-5.png')
          }
        ],
        imgs: {
          contentImgTitle: "费用支出",
          img1: require('../../images/fyzc-form-modal-bg2.png'), // 查看流程
          img2: require('../../images/fyzc-form-modal-bg2-2.png'), // 查看流程泳道框图
          img3: [{
            num1: '0',
            num2: '',
            dateTime: '',
            status: 'finished',
            list: [{
              name: '凌焘',
              role: '审批',
              handler: '凌焘',
            }]
          }], // 流程预测
        },
        doc: {
          name: `费用支出-{项目名称}-{经办人}`,
          flow: `项目负责人(协同)、空节点、凌焘(审批)`
        },
        rTabData: [
          {
            label: '智能校验',
            info: [ // state: 1.不通过 2.警示 3.通过
              {l: '支出金额字段为空', state: 1, v: '不通过'},
              {l: '支出事由字段为空', state: 1, v: '不通过'},
              {l: '支出日期字段为空', state: 1, v: '不通过'},
              {l: '您填写的内容存在错误，请查看提示信息后修改。', state: 3, v: '通过'}
            ]
          }, {
            label: '流程预测',
            info: [{
              num1: '0',
              num2: '',
              dateTime: '',
              status: 'finished',
              list: [{
                name: '凌焘',
                role: '审批',
                handler: '凌焘',
              }]
            }]
          }, {
            label: '相关数据',
            info: [
              {
                text: `蓝旗机器人费用支出-2024-07-10`,
                img: require('../../images/icon-doc.png')
              }, {
                text: `蓝旗机器人费用支出-2024-07-10`,
                img: require('../../images/icon-doc.png')
              }, {
                text: `蓝旗机器人费用支出-2024-07-10`,
                img: require('../../images/icon-doc.png')
              }, {
                text: `蓝旗机器人费用支出-2024-07-10`,
                img: require('../../images/icon-doc.png')
              }
            ]
          }
        ]
      },
      formInfo: {
        info1: [
          { l: '项目名称', v: '蓝旗机器人造林', type: 'inputIconR', icon: { path:require('../../images/modal-icon1.png'), width: '14px', height: '16px'}, span: 12 },
          { l: '费用类型', v: '商务费用', type: 'inputIconR', icon: { path:require('../../images/modal-icon1.png'), width: '14px', height: '16px'}, span: 6 },
          { l: '状态', v: '启用', span: 6 },
          { l: '费用说明', v: '', span: 24 },
          { l: '预算金额', v: '60,000.00', type: 'unitInput', unit: '元', span: 6 },
          { l: '支出总额', v: '20,020.00', type: 'unitInput', unit: '元', span: 6 },
          { l: '在途金额', v: '0.00', type: 'inputBtnR', openModal: 'nextLevel', span: 6 },
          { l: '可用余额', v: '39,980.00', type: 'unitInput', unit: '元', span: 6 }
        ],
        info2: [
          {
            btns: ['新建', '复制', '删除', '删除全部', '导入数据'],
            tableCol: [
              { label: '支出日期', prop: 'zcrq', slot: 'jump', openModal: 'fyzcModal', width: 150 },
              { label: '支出金额', prop: 'zcje' },
              { label: '支出事由', prop: 'zcsy' }
            ],
            tableData: [
              {
                zcrq: '2024-07-03',
                zcje: '10,000.00',
                zcsy: '商务招待费用',
              },
              {
                zcrq: '2024-07-30',
                zcje: '20,000.00',
                zcsy: '员工月度工资支出',
              }
            ],
            page: {
              pageNum: 1, // 当前页
              pageSize: 10, // 每页条数
              total: 0 // 总条数
            }
          }
        ]
      },
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.tableData = tableData72;
      this.customColumns = customColumns72;
    })
  },
  methods: {
    /**
     * @author Wrl
     * 点击列表查看按钮
     */
    showNextLevelModal(e) {
      this.showModal(e);
    },
    /**
     * @author Wrl
     * 重置查询条件
     */
    resetForm() {
      this.formData = {};
    },
    /**
     * @author Wrl
     * 切换查询条件
     */
    changeSearch() {
      this.showSearch = !this.showSearch
    },
    /**
     * @author Wrl
     * 点击列表 - 操作
     */
    getDetail(row) {
      this.showModal('edit');
    },
    /**
     * @author Wrl
     * 点击列表行
     */
    getSelectedRow() {
      this.showModal('table')
    },
    /**
     * @author Wrl
     * 显示弹窗
     */
    showModal(type) {
      if(type== 'edit' || type == 'table') {
        this.modalType = type;
      }
      if(type == 'edit') { // 成本登记
        this.tableModalState = true;
      } else if(type == 'table') {
        this.tableModalState = true;
      } else if(type == 'card3') {
        this.tableModalState = true;
      } else if(type == 'fyzcModal') { // 费用支出
        this.tableModalState = true;
        this.fyzcModal = true;
      } else if(type == 'nextLevel') {
        this.cardTitle2 = '穿透显示详情';
        this.nextLevelState = true;
      }
    },
    /**
     * @author Wrl
     * 关闭弹窗
     */
    closeModal(type) {
      if(type == 'edit') { // 成本登记
        this.tableModalState = false;
      } else if(type == 'table') {
        this.tableModalState = false;
      } else if(type == 'card3') {
        this.tableModalState = false;
      } else if(type == 'fyzcModal') { // 费用支出
        this.fyzcModal = false;
      } else if(type == 'nextLevel') {
        this.nextLevelState = false;
      }
    },
		/**
		 * @author Wrl
		 * 获取分页信息
		 */
		changePage(page) {
			this.page.pageNum = page.pageNum; // 当前页
			this.page.pageSize = page.pageSize; // 每页条数
			this.page.total = page.total; // 总数
		},
    /**
     * @author Wrl
     * 获取卡片二级列表分页信息
     */
    changeDetailPage(page) {
			this.tableDetailPage.pageNum = page.pageNum; // 当前页
			this.tableDetailPage.pageSize = page.pageSize; // 每页条数
			this.tableDetailPage.total = page.total; // 总数
		},
  }
};
</script>

<style lang="scss" scoped>
  .cost-control-end {
    ::v-deep {
      .search {
        .el-form-item {
          width: 100%;
        }
        .el-form-item__content {
          width: calc(100% - 90px);
        }
      }
      .btn-modal {
        .el-dialog__header {
          padding: 20px;
        }
        .el-dialog__body {
          padding: 5px;
          background: #eeeeee;
        }
        .el-tabs__nav-wrap::after {
          background-color: transparent;
        }
      }
      .edit-modal .el-dialog__header {
        padding: 20px 20px 0;
      }
      .el-dialog__body {
        padding: 10px 20px;
      }
      .cust-modal-bgi {
        margin-top: 20px;
      }
      .table-modal {
        .el-dialog__header {
          padding: 20px 20px 0;
        }
      }
    }
  }
</style>